<script setup lang="tsx">
import { ref, onMounted, reactive } from 'vue';
import { VxeToolbarPropTypes, VxeToolbarEvents, VxeUI  } from 'vxe-table';
import { Delete, Plus, Edit } from "@element-plus/icons-vue"
import Pagination from "@/components/Pagination/index.vue"
import { IPageable } from "@/components/Pagination/types/index"
import Modal from "@/components/Modal/index.vue"
import { getUserList } from "@/api/login/index";
import { UserResponseData, UserInfoResponseData, AllUserListResponseData } from "@/api/login/types/login";

const tableData = ref<UserResponseData[]>([])
const pagesConfig = reactive<IPageable>({
    currentPage: 1,
    pageSize: 50,
    total: 0
})

const isShowAddUserDialog = ref(false)


const formatterSex = ({ cellValue }: { cellValue: number }) => {
    let genderMap = {
        1: '男',
        2: '女',
        3: '保密',
    }
    return genderMap[cellValue as keyof typeof genderMap] || '未知'
}

const formatterType = ({ cellValue }: { cellValue: number }) => {
    let typeMap = {
        1: '后台系统',
        2: 'pc 端',
        3: 'APP端',
        4: 'h5 端',
        5: '微信小程序',
    }
    return typeMap[cellValue as keyof typeof typeMap] || '未知'
}


const formatterStatus = ({ cellValue }: { cellValue: number }) => {
    let statusMap = {
        0: '禁用',
        1: '有效',
    }
    return statusMap[cellValue as keyof typeof statusMap] || '未知'
}
// 获取用户列表
const getAllUserList = async () => {

    const res = await getUserList(pagesConfig)
    let { totalPages, currentPage, data, total } = res.data

    tableData.value = data;
    pagesConfig.total = Number(total)
    pagesConfig.currentPage = Number(currentPage)
    pagesConfig.pageSize = Number(totalPages )
}
const addUserForm = reactive({
    username:'',
    password:'',
    comfirmPassword:'',
})
// 新增用户
const handleAddUser = async() => {
    
}
const toolbarButtons = ref<VxeToolbarPropTypes.Buttons>([
  { name: '新增', code: 'add', status: 'primary' },
  { name: '删除', code: 'del', status: 'error' },
  { name: '保存', code: 'save', status: 'success' }
])

const buttonClickEvent: VxeToolbarEvents.ButtonClick = ({ code }) => {
  VxeUI.modal.message({
    content: `点击了 ${code}`,
    status: 'success'
  })
}

onMounted(async () => {
    await getAllUserList()
})
const handleUpdatePage = async ({ currentPage, pageSize, total }: IPageable) => {
    pagesConfig.currentPage = currentPage
    pagesConfig.pageSize = pageSize
    pagesConfig.total = total
    await getAllUserList()

}


const handleEdit = (row: UserResponseData) => {
    console.log(row)
}
const handleDelete = (row: UserResponseData) => {
    console.log(row)
}





</script>


<template>
    <div class="table-layout">
        <!-- 左侧功能栏 -->
        <vxe-toolbar :buttons="toolbarButtons" @button-click="buttonClickEvent"></vxe-toolbar>
        <!-- 右侧工具栏 -->

        <vxe-table border stripe :row-config="{ isHover: true }" show-header-overflow :data="tableData">
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column type="checkbox" width="80" title="全选"></vxe-column>
            <vxe-column title="ID" field="u_id"></vxe-column>
            <vxe-column field="username" title="用户名" sortable></vxe-column>
            <vxe-column field="gender" title="性别" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
            <vxe-column field="phone" title="手机号"></vxe-column>
            <vxe-column field="status" title="状态" :formatter="formatterStatus">
                <template #default="{ row }">
                    <el-tag :type="`${row.status === 1 ? 'success' : 'danger'}`" size="small">
                        {{ row.status === 1 ? '有效' : '禁用' }}
                    </el-tag>
                </template>
            </vxe-column>
            <vxe-column field="type" title="设备端" :formatter="formatterType"></vxe-column>
            <vxe-column field="register_time" title="注册时间"></vxe-column>
            <vxe-column field="update_time" title="更新时间"></vxe-column>
            <vxe-column title="操作" width="200" fixed="right">
                <template #default="{ row }">
                    <el-button type="success" :icon="Edit" circle @click="handleEdit(row)" size="small"></el-button>
                    <el-button type="danger" :icon="Delete" circle @click="handleDelete(row)" size="small" />
                </template>
            </vxe-column>
        </vxe-table>

        <Pagination :pagesConfig="pagesConfig" @updatePage="handleUpdatePage" />
        <!-- 新增用户弹层 -->
        <Modal :showPopup="isShowAddUserDialog" title="新增用户 ">
            <template name="defalut">
                <div>
                    <el-form>
                        <el-form-item label="用户名" prop="username" v-model="addUserForm.username"></el-form-item>    
                        <el-form-item label='密码' prop="password" v-model="addUserForm.password"></el-form-item>
                        <el-form-item label='确认密码' prop="comfirmPassword" v-model="addUserForm.comfirmPassword"></el-form-item>
                    </el-form>
                </div>
            </template>
            <template name="footer">
                <div>
                    <el-button type="primary" @click="handleAddUser">确定</el-button>
                    <el-button @click="isShowAddUserDialog = false">取消</el-button>
                </div>
            </template>
        </Modal>
    </div>
</template>




<style lang="ts" scoped></style>